<!DOCTYPE html>
<html>

	<head><link rel="shortcut icon" href="http://likexia.gitee.io/tools/lib/img/h5.png" type="image/x-icon">
		<meta charset="utf-8">
		<title></title>

		<style>
			/*tab*/
ul,li{ list-style:none;}

.tab{ width:100%; margin:0 auto 20px;}

.tab-hd { background:none; overflow:hidden; zoom:1;font-size:15px;line-height:26px;}

.tab-hd li{background:#fff; float:left; width:24.6%; color:#000; text-align:center; cursor:pointer;line-height:26px;padding:5px 0px; border:1px solid #DCDCDC;border-right:none; border-bottom-width:3px;s}

.tab-hd li.active{ background:#EEEEEE; border-bottom:3px solid #00B481;color:#00B481;}
.tab-bd{margin-top:15px;}
.tab-bd li{display:none; padding:10px; border:1px solid #ddd; border-top:0 none; font-size:24px;overflow:hidden;}
.tab-bd li a{font-size:13px;line-height:25px;white-space:nowrap;text-overflow:ellipsis;padding:5px 15px 5px 10px;border-bottom:solid 1px #eee;border-left:3px solid transparent;margin-left:-3px;overflow:hidden;position:relative;display:block;font-size:14px}
.tab-bd li a:hover{background-color:#F8FCFE;border-left-color:#428bca}

/*tab*/
		</style>
	</head>

	<body>
		<div class="tab">
			<ul class="tab-hd">
				<li>tab1</li>
				<li>tab2</li>
				<li>tab3</li>
				<li>tab4</li>
			</ul>
			<ul class="tab-bd">
				<li>111111</li>

				<li>2222222</li>

				<li>333333</li>
				<li>444444</li>
			</ul>
		</div>

		<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
		<script type="text/javascript">
			$(function() {
				function tabs(tabTit, on, tabCon) {
					$(tabCon).each(function() {
						$(this).children().eq(0).show();
					});
					$(tabTit).each(function() {
						$(this).children().eq(0).addClass(on);
					});
					$(tabTit).children().click(function() {
						$(this).addClass(on).siblings().removeClass(on);
						var index = $(tabTit).children().index(this);
						$(tabCon).children().eq(index).show().siblings().hide();
					});
				}
				tabs(".tab-hd", "active", ".tab-bd");
			});
		</script>
	</body>

</html>